<template>
  <h1>一个人的信息</h1>
  <!-- 模板中解析，不需要.value -->
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <button @click="test">点击触发hello事件</button>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive } from 'vue'

export default {
  name: 'Demo',
  /* beforeCreate() {
    console.log('---beforeCreate---')
  }, */
  // 父组件传递过来的数据，需要在子组件中通过props接收，如果没有用props接收，则会有警告信息
  // [Vue warn]: Extraneous non-props attributes (msg, school) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes. at <Demo msg="你好" school="尚硅谷" > 
  props: ['msg', 'school'],
  // 定义子组件可以触发的事件
  // 如果不定义，则会有警告信息，但是可以触发成功
  // [Vue warn]: Extraneous non-emits event listeners (hello) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
  emits: ['hello'],
  setup(props, context) {
    console.log('---setup---', props)
    console.log('---setup---', context)
    console.log('---setup---attrs', context.attrs) // 获取父组件传递过来的所有非props属性
    console.log('---setup---emits', context.emit) // 获取父组件传递过来的所有emits事件
    console.log('---setup---slots', context.slots) // 获取父组件传递过来的插槽内容

    let person = reactive({
      name: "张三",
      age: 20,
    })
    function test() {
      // 触发事件，通知父组件
      // 注意：使用时候是用context.emit，单数形式；声明时候是用emits，复数形式
      context.emit('hello', '我是子组件传递过来的参数')
    }

    // 返回一个对象，暴露给模板使用（常用）
    return {
      person,
      test
    }
  }
}
</script>

<style>

</style>
